<template>
  <div class="table-wrap">
    <div class="table-top">
      <div class="table-name flex-center">姓名</div>
      <div class="table-sex flex-center">性别</div>
      <div class="table-lv flex-center">权限级别</div>
      <div class="table-edit flex-center">操作</div>
    </div>
    <div class="table-item" v-for="item in tableDataSource" :key="item.id">
      <div class="table-name flex-center">{{ item.name }}</div>
      <div class="table-sex flex-center">{{ item.sex }}</div>
      <div class="table-lv flex-center">{{ item.lv }}</div>
      <div class="table-edit flex-center">
        <!-- <a class="item-btn" href="#" @click="handleDeleteItem(item)">删除</a> -->
        <a class="item-btn" href="#">编辑</a>
      </div>
    </div>
  </div>
</template>

<script>
import {  SEX_MAP } from "./../../config";
export default {
  name: "list-table",
  props: ["userList"],
  computed: {
    tableDataSource: function () {
      return this.userList.map((item) => ({
        ...item,
        sex: SEX_MAP[item.sex],
      }));
    },
  },
};
</script>

<style scoped>
.filter-wrap {
  padding: 10px;
}
.item-btn {
  color: deepskyblue;
  margin-right: 10px;
}
.filter-line {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.label {
  display: flex;
  padding-right: 5px;
  justify-content: flex-end;
}
.table-item {
  display: flex;
  align-items: center;
}
.table-top {
  display: flex;
  background: #ddd;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-name {
  flex: 4;
}
.table-sex {
  flex: 3;
}
.table-lv {
  flex: 3;
}
.table-edit {
  flex: 5;
}
</style>
